<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">文本标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="keyword" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <script type="text/html" id="ToolBar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 新增 </button>
                <button class="layui-btn layui-btn-danger layui-btn-sm data-delete-btn" lay-event="delete_batch"> 删除 </button>
            </div>
        </script>
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="more">
                更多
                <i class="layui-icon layui-icon-down"></i>
            </a>
        </script>
    </div>
</div>
<script type="text/html" id="switchStatus">
</script>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script src="/js/auth/index.js" charset="utf-8"></script>
<script src="/js/form/form-build.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table' , 'layer'],async function () {
        let $        = layui.jquery,
            form     = layui.form,
            table    = layui.table,
            dropdown = layui.dropdown;

        // -------------------------[ 信息定义区 start]-----------------------//
        let listApiUrl         = '/admin/dynamic/field/list',
            detailApiUrl       = '/admin/dynamic/field/detail',
            addApiUrl          = '/admin/dynamic/field/add',
            updateApiUrl       = '/admin/dynamic/field/update',
            deleteApiUrl       = '/admin/dynamic/field/delete',
            detailPageUrl      = '/page/dynamic/field/detail.html',
            addPageUrl         = '/page/dynamic/field/add.html',
            updatePageUrl      = '/page/dynamic/field/edit.html';
        var keys = ["field-attr","field-web-type"]

        let fields = [
            {use:["detail","update"], type: "number", label:"ID", name:"id", required: true, disabled: true},
            {use:["add","detail","update"], type:"text", label:"字段名称", name:"label", required:true},
            {use:["add","detail","update"], type:"text", label:"唯一标识", name:"key", required:true},
            {
                use:["add","detail","update"],
                type: "select",
                name: "attr",
                label: "字段属性",
                required: true,
                options: [
                    {label: "文本", value: "text"},
                    {label: "单选", value: "select-one"},
                    {label: "多选", value: "select-more"},
                    {label: "文件", value: "file"},
                    {label: "单日期", value: "date-one"},
                    {label: "多日期", value: "date-more"},
                    {label: "数字", value: "number"}
                ]
            },
            {
                use:["add","detail","update"],
                type: "select",
                label: "前端组件",
                name: "web_type",
                required: true,
                options: [
                    {label: "普通文本输入" ,value: "web-input"},
                    {label: "多行文本" ,value: "web-textarea"},
                    {label: "数字输入框" ,value: "web-number"},
                    {label: "单选框组" ,value: "web-radio"},
                    {label: "复选框组" ,value: "web-checkbox"},
                    {label: "下拉框" ,value: "web-select"},
                    {label: "日期" ,value: "web-date"},
                    {label: "上传按钮" ,value: "web-upload"},
                    {label: "隐藏域" ,value: "web-hidden"},
                    {label: "自定义片段" ,value: "web-custom"},
                ]
            },
            {
                use:["add","detail","update"],
                type: "select",
                label: "关联枚举",
                name: "bind_enum_key",
                options: [
                    {label: "性别" ,value: "sex-enum"},
                ],
            },
            {
                use:["add","detail","update"],
                type: "select",
                label: "日期格式",
                name: "date_format",
                options: [
                    {label: "2025",value: "yyyy"},
                    {label: "2025-01",value: "yyyyMM"},
                    {label: "2025-01-02",value: "yyyyMMdd"},
                    {label: "2025-01-02 13",value: "yyyyMMdd-HH"},
                    {label: "2025-01-02 13:40",value: "yyyyMMdd-HHmm"},
                    {label: "2025-01-02 13:40:50",value: "yyyyMMdd-HHmmss"},
                    {label: "13:40:50",value: "HHmmss"},
                ],
                tip:"【 日期 】必填，主要描述日期显示格式",
            },
            {
                use:["add","detail","update"],
                type: "select",
                label: "(年月日)间隔符",
                name: "date_space_mark_first",
                options: [
                    {label: "无符号",value: "unsigned"},
                    {label: "横杆( - )",value: "cross-bar"},
                    {label: "下划线( _ )",value: "under-line"},
                    {label: "冒号( : )",value: "colon"},
                    {label: "斜杆( / )",value: "diagonal-bar"},
                    {label: "中文( 年月日时秒分 )",value: "cn"},
                ],
                tip:"【 日期 】必填，主要描述日期的年月日格式",
            },
            {
                use:["add","detail","update"],
                type: "select",
                label: "(时秒分)间隔符",
                name: "date_space_mark_second",
                options: [
                    {label: "无符号",value: "unsigned"},
                    {label: "横杆( - )",value: "cross-bar"},
                    {label: "下划线( _ )",value: "under-line"},
                    {label: "冒号( : )",value: "colon"},
                    {label: "斜杆( / )",value: "diagonal-bar"},
                    {label: "中文( 年月日时秒分 )",value: "cn"},
                ],
                tip:"【 日期 】必填，主要描述日期的时分秒格式",
            },
            {
                use:["add","detail","update"],
                type: "radio",
                name: "date_has_space",
                label: "日期间空格",
                options: [
                    { label: "是", value: "y" },
                    { label: "否", value: "n" },
                ],
            },
            {use:["add","detail","update"], type: "textarea", name: "remark", label: "备注", placeholder: "请输入内容"},
            {use:["add","detail","update"], type: "text", name: "default_value", label: "默认值", placeholder: "请输入内容"},
            {
                use:["add","detail","update"],
                type: "radio",
                name: "required",
                label: "是否必填",
                options: [
                    { label: "是", value: "y" },
                    { label: "否", value: "n" }
                ]
            },
            {
                use:["add","detail","update"],
                type: "radio",
                name: "status",
                label: "数据状态",
                options: [
                    { label: "正常", value: "1" },
                    { label: "删除", value: "2" }
                ]
            },
            {use:["detail"], type:"text", label:"创建时间", name:"create_time"},
            {use:["detail"], type:"text", label:"更新时间", name:"update_time"},
            {
                use:["add","update"],
                type: "save_btn",
                name: "save_btn",
                label: "确认",
            },

        ];

        var listCols =  [[
            {fixed: 'left', type: 'checkbox'},
            {fixed: 'left', field: 'id', width: 80, title: 'ID'},
            {fixed: 'left', field: 'label', width: 200, title: '名称'},
            {fixed: 'left', field: 'key', width: 150, title: '标识'},
            {field: 'attr', width: 150, title: '属性'},
            {field: 'web_type', width: 150, title: '前端组件'},
            {field: 'required', width: 80, title: '必填', templet: function(d){
                    if(d.required === 'y') {
                        return '<span style="color:green;">是</span>';
                    } else if (d.required === 'n') {
                        return '<span style="color:red;">否</span>';
                    }else {
                        return '<span style="color:orange;">未知</span>';
                    }
                }
            },
            {field: 'default_value', width: 150, title: '默认值'},
            {field: 'remark', width: 200, title: '备注'},
            {field: 'status', width: 70, title: '状态', templet: function(d){
                    if(d.status == 1) {
                        return '<span style="color:green;">正常</span>';
                    } else if (d.status == 2) {
                        return '<span style="color:red;">删除</span>';
                    }else {
                        return '<span style="color:orange;">未知</span>';
                    }
                }
            },
            {field: 'create_time', width: 180, title: '创建时间'},
            {field: 'update_time', width: 180, title: '更新时间'},
            {fixed: 'right', title: '操作', minWidth: 80, toolbar: '#currentTableBar', align: "center"},
        ]]

        // -------------------------[ 信息定义区 end]-----------------------//

        //  列表
        table.render({
            elem: '#currentTableId',
            url: listApiUrl,
            method:"POST",
            contentType:'application/json; charset=UTF-8',
            dataType:'json',
            toolbar: '#ToolBar',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            parseData: function(res){
                return FormatListData(res);
            },
            cols:listCols,
            limits: [20, 50, 100],
            limit: 20,
            page: true,
            skin: 'line'
        })
        // 搜索
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            table.reload('currentTableId', {page: {curr: 1}, where: {keywords: result}}, 'data');
            return false;
        });

        // 工具栏
        table.on('toolbar(currentTableFilter)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            switch (obj.event) {
                case 'add':
                    var index = layer.open({
                        title: '新增',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['60%','80%'],
                        content: addPageUrl,
                        success: function (layero, index) {
                            let addFields = FormatFields(fields, obj.event)
                            let iframeWin = window[layero.find('iframe')[0]['name']];
                            iframeWin.setData(GetLoginInfo(), addApiUrl, {}, addFields);
                        },
                    });
                    table.reload('currentTableId');
                    return false
                case 'delete_batch':
                    var checkData = checkStatus.data;
                    if(checkData.length === 0){
                        return layer.msg('请选择一行');
                    }
                    var ids = []
                    checkData.forEach(function(item) {
                        ids.push(item.id)
                    });
                    DeleteDataByIds(ids, deleteApiUrl)
                    return false
            }
        });

        // 列表操作
        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'more') {
                // 更多 - 下拉菜单
                dropdown.render({
                    elem: this, // 触发事件的 DOM 对象
                    show: true, // 外部事件触发即显示
                    data: [
                        {title: '详情', id: 'detail'},
                        {title: '修改', id: 'update'},
                        {title: '删除', id: 'delete'},
                    ],
                    click: function(menudata){
                        switch (menudata.id) {
                            case 'detail':
                                layer.open({
                                    title: '详情',
                                    type: 2,
                                    shade: 0.2,
                                    maxmin: true,
                                    shadeClose: true,
                                    area: ['70%','80%'],
                                    content: detailPageUrl,
                                    success: function (layero, index) {
                                        let detailFields = FormatFields(fields, menudata.id)
                                        let iframeWin = window[layero.find('iframe')[0]['name']];
                                        iframeWin.setData(GetLoginInfo(), detailPageUrl, data, detailFields);
                                        GetDataDetailById(obj.data.id, detailApiUrl)
                                            .done(function(res) {
                                                DynamicFormFillValue(layer.getChildFrame('body', index), res.data, detailFields);
                                                try {
                                                    let iframeWin = layero.find('iframe');
                                                    if (iframeWin.length > 0) {
                                                        let updateWin = iframeWin[0].contentWindow;
                                                        if (updateWin.layui && updateWin.layui.form) {
                                                            setTimeout(function() {
                                                                updateWin.layui.form.render();
                                                            }, 50);
                                                        }
                                                    }
                                                } catch(e) {
                                                    console.warn('表单渲染失败:', e);
                                                }
                                            })
                                            .fail(function() {
                                                layer.msg('获取数据详情失败');
                                            });
                                    },
                                })
                                return false
                            case 'update':
                                layer.open({
                                    title: '修改',
                                    type: 2,
                                    shade: 0.2,
                                    maxmin: true,
                                    shadeClose: true,
                                    area: ['70%','80%'],
                                    content: updatePageUrl,
                                    success: function (layero, index) {
                                        let updateFields = FormatFields(fields, menudata.id)
                                        let iframeWin = window[layero.find('iframe')[0]['name']];
                                        iframeWin.setData(GetLoginInfo(), updateApiUrl, data, updateFields);
                                        GetDataDetailById(obj.data.id, detailApiUrl)
                                        .done(function(res) {
                                            DynamicFormFillValue(layer.getChildFrame('body', index), res.data, updateFields);
                                            try {
                                                let iframeWin = layero.find('iframe');
                                                if (iframeWin.length > 0) {
                                                    let updateWin = iframeWin[0].contentWindow;
                                                    if (updateWin.layui && updateWin.layui.form) {
                                                        setTimeout(function() {
                                                            updateWin.layui.form.render();
                                                        }, 50);
                                                    }
                                                }
                                            } catch(e) {
                                                console.warn('表单渲染失败:', e);
                                            }
                                        })
                                        .fail(function() {
                                            layer.msg('获取数据详情失败');
                                        });
                                        table.reload('currentTableId');
                                    },
                                })
                                return false
                            case 'delete':
                                var ids = []
                                ids.push(obj.data.id)
                                DeleteDataByIds(ids, deleteApiUrl)
                        }
                    },
                    id: 'dropdown-table-tool',
                    align: 'right',
                    style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);'
                });
                return false
            }
        });
    });
</script>
</body>
</html>
